<!--
  具体某点信息显示面板
-->

<style scoped>
.ty11{
  box-shadow: none;
  border:none;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.ty11>>> .is-top .is-active{
  color:#000;
}
.ty11>>>.is-top{
  color:#888;
}

.ty11>>>.el-tabs__header{
  background-color: #213477;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.ty11>>>.el-tabs__item{
  color: #fff;
}
.ty11>>>.el-tabs__item:hover{
  color:#247fd7;
  background-color: #fff;
}
.ty11>>>.is-active{
  color: #247fd7!important;
  border-top:#247fd7!important;
  padding: 0 20px!important;
}
</style>

<template>
  <!--具体某点信息-->
  <div>
    <el-tabs class="ty11" v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane  v-for="(tab,name) in tabs" :key="name" :label="tab['name']" :name="name">
        <component v-if="activeName==name" :is="tab['component']" :row="row" :src="tab['src']" :addition="tab['addition']" :tabs="tabs" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeName: '',
      rowLocal: {}
    }
  },
  mounted () {
    if (this.active) {
      this.activeName = this.active
    } else {
      for (var activeName in this.tabs) {
        this.activeName = activeName
        break
      }
    }

    this.$emit('opened-custom')
  },
  watch: {
    row: function () {
      this.rowLocal = { ...this.row }
    },
    active: function () {
      this.activeName = this.active
    }
  },
  methods: {
    handleClick () {
    }
  },
  components: {},
  props: ['row', 'layerid', 'tabs', 'active']
}
</script>
